<!--
 * @Author: 清羽
 * @Date: 2022-09-07 09:00:10
 * @LastEditTime: 2022-09-08 16:46:53
 * @LastEditors: you name
 * @Description: 商品审核列表
-->
<!-- checkList 页 -->
<template>
  <div class="app-container">
    <el-table
      :data="dataList"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="created_at"
        width="180"
      >
        <template slot="header">
          申请时间
        </template>
        <template slot-scope="scope">
          <span>{{scope.row.created_at| dateformat}}</span>
        </template>
      </el-table-column>
      <!-- 申请时间end -->

      <el-table-column prop="product_name">
        <template slot="header">
          商品名称
        </template>
      </el-table-column>
      <!-- 商品名称end -->

      <el-table-column
        prop="business_name"
        width="220"
      >
        <template slot="header">店铺名称</template>
      </el-table-column>
      <!-- 店铺名称end -->

      <el-table-column
        prop="user_name"
        width="200"
      >
        <template slot="header">申请人名称</template>
      </el-table-column>
      <!-- 申请人名称end -->

      <el-table-column
        label="操作"
        align="center"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-search"
            @click="searchProduct(scope.row.product_id)"
          >查看</el-button>

          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose"
          >

            <el-dialog
              width="30%"
              title="申请失败详情"
              :visible.sync="notInputVisible"
              append-to-body
              :before-close="handleClose"
            >
              <el-input
                v-model="checkNoInput"
                placeholder="请输入申请失败详情"
              ></el-input>
              <span
                slot="footer"
                class="dialog-footer"
              >
                <el-button @click="checkNot(scope.row.product_id)">
                  确定
                </el-button>
              </span>

            </el-dialog>
            <ProductInfo
              :info.sync="productInfo"
              :value="productFromValue"
              :group="productFromGroup"
              :image="productInfoSliderImage"
              :fiex_group="fixedFromGroup"
              :fiex_value="fixedFromValue"
            />

            <span
              slot="footer"
              class="dialog-footer"
            >
              <el-button @click="checkSuccess(scope.row.product_id)">审核通过
              </el-button>
              <el-button @click="notInputVisible=true">审核不通过
              </el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="dialogVisible = false"
              >确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import ProductInfo from './components/ProductInfo.vue'
export default {
  name: "checkList",
  data () {
    return {
      dataList: [],
      dialogVisible: false,
      notInputVisible: false,
      checkNoInput: '',
      productInfo: null,
      productFromValue: [],
      productInfoSliderImage: [],
      productFromGroup: [],
      fixedFromGroup: [],
      fixedFromValue: [],
    }
  },
  components: { ProductInfo },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    getList () {
      this.$api.product.getProductCheckList().then(response => {
        this.dataList = response.data
        console.log("this.$api.product.getProductCheckList => this.dataList", this.dataList)
      })
    },
    searchProduct (value) {
      console.log("searchProduct => value", value)
      this.$api.product.getProductInfo(value).then(res => {
        console.log("this.$api.product.getProductInfo => res", res)
        this.productInfo = res.data
        this.productFromValue = res.fromValue
        this.productFromGroup = res.fromGroup
        this.fixedFromGroup = res.fixedFromGroup
        this.fixedFromValue = res.fixedFromValue
        console.log('this.$api.product.getProductInfo => this.fixedFromValue', this.fixedFromValue)
        // console.log('this.$api.product.getProductInfo => this.fixedFromGroup', this.fixedFromGroup)
        // console.log('this.$api.product.getProductInfo => this.productFromGroup', this.productFromGroup)
        console.log('this.$api.product.getProductInfo => this.productFrom', this.productFromValue)
        for (const i in this.productInfo.slider_image) { // 获取商品轮播图
          this.productInfoSliderImage[i] = this.imgUrls + this.productInfo.slider_image[i].img_url
        }
      })
      this.dialogVisible = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    checkSuccess (productId) { // 审核通过
      console.log("审核通过的id =>", productId)
      this.$api.product.submitProductCheckSuccess(productId).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.dialogVisible = false
      })
    },
    checkNot (productId) { // 审核不通过
      const data = { stateInfo: this.checkNoInput }
      this.$api.product.submitProductCheckNot(productId, data).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.notInputVisible = false
        this.dialogVisible = false
        this.getList()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.app-container {
}
</style>